<template>
    <el-dialog :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" :title="title">
       <el-form :model="form" ref="form" :rules="rules" class="demo-form" v-if="dialogVisible">
          <el-form-item class="item" label="告警名称：" prop="warningName">
            <el-input v-model="form.warningName" placeholder="请输入告警名称" style="width:60%"></el-input>
          </el-form-item>
          <div class="title"><h2>触发条件</h2></div>
          <div class="group" v-for="(items,index) in form.productWarningTriggerVOList" :key="index">
            <el-form-item class="item"
                :prop="`productWarningTriggerVOList[${index}].triggerType`"
                :rules="[{ required: true, message: '请选择触类型', trigger: 'change' }]"
                 label="" >
                <div>触发器：{{index +1}}</div>
                <el-select class="select" placeholder="选择触发类型" @change="selectTrigger(index)" clearable
                 v-model="items.triggerType">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <template v-if="ways == 'add' ? isShow[index] : items.productWarningConditionVOList">
              <div v-for="(condition, conditionId) in form.productWarningTriggerVOList[index].productWarningConditionVOList" :key="conditionId">
                    <div class="filter">
                        <el-form-item 
                            :prop="`productWarningTriggerVOList[${index}].productWarningConditionVOList[${conditionId}].conditionType`"
                            :rules="{ required: true, message: '请选择类型', trigger: 'change' }"
                            label="" >
                            <el-select class="drag2" v-model="condition.conditionType"  placeholder="选择类型，如：属性/事件" style="width:100%">
                                <el-option
                                    v-for="event in eventList"
                                    :key="event.value"
                                    :label="event.label"
                                    :value="event.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            :prop="`productWarningTriggerVOList[${index}].productWarningConditionVOList[${conditionId}].filterKey`"
                            :rules="[{ required: true, message: '请选择过滤条件KEY', trigger: 'change' }]"
                            label="" >
                            <el-input class="input2" v-model="condition.filterKey" placeholder="过滤条件KEY" style="width:100%"></el-input>
                        </el-form-item>
                        <el-form-item 
                            :prop="`productWarningTriggerVOList[${index}].productWarningConditionVOList[${conditionId}].compareMethod`"
                            :rules="[{ required: true, message: '请选择操作符', trigger: 'change' }]"
                            label="" >
                            <el-select class="drag" v-model="condition.compareMethod" placeholder="操作符">
                                <el-option
                                    v-for="operator in operatorList"
                                    :key="operator.value"
                                    :label="operator.label"
                                    :value="operator.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item 
                            :prop="`productWarningTriggerVOList[${index}].productWarningConditionVOList[${conditionId}].filterVal`"
                            :rules="[{ required: true, message: '请选择过滤条件值', trigger: 'change' }]"
                            label="" >
                            <el-input class="input2" v-model="condition.filterVal" placeholder="过滤条件值" style="width:100%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="form.productWarningTriggerVOList[index].productWarningConditionVOList.length > 1" class="delete" @click="delTrigger2(index,conditionId)" type="text">删除</el-button>

                        </el-form-item>
                    </div>
                </div>
                <el-button class="delete" @click="addTrigger2(index)" type="text">添加</el-button>
            </template>
            <el-button v-if="index == 0" class="btn" @click="addTrigger" type="text" icon="el-icon-circle-plus"></el-button>
            <el-button v-if="index > 0" class="del btn" @click="delTrigger(index)" type="text" icon="el-icon-remove"></el-button>
            <!-- </el-form-item> -->
                
          </div>
          <!-- <div class="title"><h2>转换</h2></div>
          <div class="group">
            <div v-for="(items,index) in list2" :key="index" :class="{'pd5': index>=0 && index!=list2.length}">
                <el-form-item class="item" label="">
                    <el-input class="input" v-model="items.value" placeholder="请输入属性"></el-input>
                    <el-input class="input" v-model="items.label" placeholder="请输入别名"></el-input>
                    <el-button v-if="index == 0" class="btn btn2" @click="addSwitch" type="text" icon="el-icon-circle-plus"></el-button>
                    <el-button v-if="index > 0" class="del btn btn2" @click="delSwitch" type="text" icon="el-icon-remove"></el-button>
                </el-form-item>
            </div>
          </div>
          <div class="title"><h2>执行动作</h2></div>
          <div class="group">
            <div v-for="(items,index) in list3" :key="index">
                <el-form-item class="item" label="">
                    <div>执行动作：{{index +1}}</div>
                    <el-select class="select" v-model="items.value" placeholder="选择产品">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button v-if="index == 0" class="btn" @click="addAction" type="text" icon="el-icon-circle-plus"></el-button>
                    <el-button v-if="index > 0" class="del btn" @click="delAction" type="text" icon="el-icon-remove"></el-button>
                </el-form-item>
            </div>
          </div> -->
          <el-form-item class="update">
            <div class="btnGroup">
              <el-button type="primary" @click="submitForm('form')">确 定</el-button>
              <el-button @click="resetForm('form')">关 闭</el-button>
            </div>
          </el-form-item>
      </el-form>

    </el-dialog>
</template>
<script>
// import { editWarning, addObj, updateObj } from '@/api/device/instance/alarm-list'
export default {
  data () {
    return {
      dialogVisible: false,
      index:0,
      isShow: [],
      form: {
        "activated": "",
        "createTime": "",
        "productId": this.$route.query.productId,
        "productWarningTriggerVOList": [
            {
            "productWarningConditionVOList": [
                {
                "compareMethod": "",
                "conditionId": "",
                "conditionType": "",
                "filterKey": "",
                "filterVal": "",
                "triggerId": ""
                }
            ],
            "triggerId": "",
            "triggerType": ""
            }
        ],
        "warningId": "",
        "warningName": ""
      },
      form2:  {
        "activated": "",
        "createTime": "",
        "productId": this.$route.query.productId,
        "productWarningTriggerVOList": [
            {
            "productWarningConditionVOList": [
                {
                "compareMethod": "",
                "conditionId": "",
                "conditionType": "",
                "filterKey": "",
                "filterVal": "",
                "triggerId": ""
                }
            ],
            "triggerId": "",
            "triggerType": ""
            }
        ],
        "warningId": "",
        "warningName": ""
      },
      ways: 'add',
      params: {
       productId: this.$route.query.productId,
      },
      list1:{
          
      },
      options:[{
          value: 'device',
          label: '设备触发',
      }],
     eventList:[
        //  { value: 'online', label: '上线' },
        //  { value: 'offline', label: '离线' },
        //  { value: 'event', label: '事件' },
         { value: 'attribute', label: '属性' },
         { value: 'telemetry', label: '遥测' }
     ],
     operatorList:[
         { value: '=', label: '等于(=)' },
         { value: '!=', label: '不等于(!=)' },
         { value: '>', label: '大于(>)' },
         { value: '<', label: '小于(<)' },
         { value: '>=', label: '大于等于(>=)' },
         { value: '<=', label: '小于等于(>=)' }
     ],
     rules:{
         warningName:[{ required: true, message: '请输入告警名称', trigger: 'blur' }],
        //  triggerType:[{ required: true, message: '请选择触类型', trigger: 'blur' }],
        //  conditionType:[{ required: true, message: '请选择类型', trigger: 'blur' }],
        //  filterKey:[{ required: true, message: '请选择过滤条件KEY', trigger: 'blur' }],
        //  compareMethod:[{ required: true, message: '请选择触操作符', trigger: 'blur' }],
        //  filterVal:[{ required: true, message: '请选择过滤条件值', trigger: 'blur' }],
     }
    
    }
  },
  props: {
      title: {
          default: '新增告警',
          type: String
      }
  },
  methods: {
    //选择触发器
    selectTrigger(val){
        this.isShow.push({val: true})
    },
    //增加触发器
    addTrigger(index){
        this.form.productWarningTriggerVOList.push({
            "triggerType": "",
            "triggerId": "",
            productWarningConditionVOList:[{
                "conditionId": "",
                "compareMethod": "",
                "conditionType": "",
                "filterKey": "",
                "filterVal": "",
                "triggerId": ""
            }]
        })
    },
    //增加过滤条件
    addTrigger2(index){
        this.index ++
        this.form.productWarningTriggerVOList[index].productWarningConditionVOList.push({
                "conditionId": "",
                "compareMethod": "",
                "conditionType": "",
                "filterKey": "",
                "filterVal": "",
                "triggerId": ""
        })
        
    },
    //删除触发器
    delTrigger(index){
       this.form.productWarningTriggerVOList.splice(index,1)
    },
    //删除过滤条件
    delTrigger2(index,val){
        this.form.productWarningTriggerVOList[index].productWarningConditionVOList.splice(val,1)
        this.index--
        // this.isShow.splice(index,1)
    },
    //添加转换
    addSwitch(){
        this.list2.push({
            value: '',
            label: ''
        })
    },
    //删除转换
    delSwitch(index){
        this.list2.splice(index,1)
    },
    //添加执行动作
    addAction(){
        this.list3.push({
            value: ''
        })
    },
    //删除添加动作
    delAction(index){
        this.list3.splice(index,1)
    },
    //获取告警
    getWarning(val){
        editWarning(val).then(res => {
            if(res.data.code == 0){
                this.form = res.data.data
            }
        })
    },
    //新增告警
    async addWarning(){
        const res = await addObj(this.form)
        if(res.data.code == 0){
            this.$message.success('添加成功')
            this.$emit('getlist',this.form )
        }
    },
    //更新告警
    async editWarning(){
        const res = await updateObj(this.form)
        if(res.data.code == 0){
            this.$message.success('更新成功')
            this.$emit('getlist',this.form )
        }
    },
    //提交表达确定
    submitForm(form){
      this.$refs[form].validate((valid) => {
      if (valid){
          this.ways == 'add' ? this.addWarning() : this.editWarning()
          this.dialogVisible = false;
          this.form = Object.assign({},this.form2)
          this.isShow = []
          } else {
            console.log('submit', '校验有误')
          }
      })
    },
    resetForm(form){
      this.dialogVisible = false;
      this.form = Object.assign({},this.form2)
      this.isShow = []
      this.$refs[form].resetFields();
    }
  }
}
</script>
<style lang="scss" scoped>
.update{
  position: relative;
  margin-top: 30px;
  border-top: solid 1px #ddd;
  padding-top:10px;
}
.title{
    margin: 20px 0 20px;
    h2{
        font-size: 16px;
        font-weight: normal;
    }
}
.group{
    position: relative;
    background-color: rgb(245, 245, 246);
    padding: 20px 10px;
    margin-bottom: 20px;
    .pd5{
        padding-bottom: 5px;
    }
    .item{
        margin-bottom: 0;   
    }
    .btn{
        top: 26px;
        font-size: 26px;
        right: 10px;
        position: absolute;
        &.del{
            color: #dd6161;
        }
        &.btn2{
            top: -5px;
        }
    
    
    }
    .select{
        position: relative;
        width: 280px;
        padding-right: 15px;
    }
    .input{
        width: 200px;
        margin-right: 15px;
    }
}
.btnGroup{
    position: absolute;
    right: 20px;
  }

.index{
    text-indent: 2em;
}
.filter{
    display: flex;
    margin-top: 5px;
    
    .input2{
        width: 32.8%;
    }
    .drag{
        padding: 0 10px;
    }
    .drag2{
        width: 40%;
        padding-right: 10px;
    }
    .delete{
        margin-left: 50px;
    }
}
</style>
<style lang="scss">
.el-dialog__header{
  border-bottom: solid 1px #ddd;
}
</style>